<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <title>管理界面</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/layui.css') }}">
    <style>
        .layui-layout-admin .layui-side {
            transition-property: all;
            transition-duration: 500ms;
            transition-timing-function: linear;
        }

        .layui-layout-admin .layui-body {
            transition-property: all;
            transition-duration: 500ms;
            transition-timing-function: linear;
        }

        .layui-layout-admin .layui-footer {
            transition-property: all;
            transition-duration: 500ms;
            transition-timing-function: linear;
        }

        .layui-layout-admin .layui-body {
            height: calc(100% - 60px);
        }

        #tab-main {
            position: relative;
            height: 100%;
        }

        #tab-page {
            margin: 0;
            overflow: hidden;
            height: 100% !important;
        }

        #tab-page .layui-tab-content {
            height: calc(100% - 42px) !important;
        }

        #tab-page .layui-tab-content .layui-tab-item {
            overflow-y: auto;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">私有化部署平台</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left" lay-filter="header-left-nav">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>
            <li class="layui-nav-item layui-hide-xs">
                <a href="#" class="layui-icon layui-icon-shrink-right" id="menu-left-shrick"></a>
            </li>
            <li class="layui-nav-item layui-hide-xs">
                <a href="#" class="layui-icon layui-icon-refresh-1" id="menu-left-refresh"></a>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right" lay-filter="header-right-nav">
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <a href="javascript:;">
                    <img alt="" src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img"/>
                    Admin
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">个人中心</a></dd>
                    <dd><a href="javascript:;">设置</a></dd>
                    <dd><a href="javascript:;">退出</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree" lay-filter="side-left-nav">
                <!--
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="layui-icon layui-icon-github"></i><span>测试功能</span></a>
                    <dl class="layui-nav-child">
                        <dd class="main_left"><a  data-src="/common/cat?pagename=cat&title=测试功能|学生列表1"  target="_top" >学生列表1</a></dd>
                        <dd class="main_left"><a  data-src="/servers/groups?title=主机管理|分组列表"  target="_top" >分组列表</a></dd>
                        <dd class="main_left"><a  data-src="/servers/select_group?title=主机管理|分组选择"  target="_top" >分组选择</a></dd>
                        <dd class="main_left"><a  data-src="/servers/server/list?pagename=cat1&title=主机管理|主机管理"  target="_top" >主机管理</a></dd>
                    </dl>
                </li>-->
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="layui-icon layui-icon-github"></i><span>系统设置</span></a>
                    <dl class="layui-nav-child">
                        <dd class="main_left"><a  data-src="/dicts/groups?title=字典设置|组织结构"  target="_top" >组织结构</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="layui-icon layui-icon-github"></i><span>主机纳管</span></a>
                    <dl class="layui-nav-child">
                        <dd class="main_left"><a  data-src="/servers/groups?pagename=cat1&title=主机管理|分组列表"  target="_top" >分组列表</a></dd>
                        <dd class="main_left"><a  data-src="/servers/server/list?pagename=cat1&title=主机管理|主机管理"  target="_top" >主机管理</a></dd>
                        <dd class="main_left"><a  data-src="/servers/server_monitor/list"  target="_top" >主机监控</a></dd>
                        <!--<dd class="main_left"><a  data-src="/cat?title=主机管理|主机查询"  target="_top" >主机查询</a></dd>-->
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="layui-icon layui-icon-github"></i><span>项目中心</span></a>
                    <dl class="layui-nav-child">
                        <dd class="main_left"><a  data-src="/projects/project/list"  target="_top" >项目管理</a></dd>
                        <dd class="main_left"><a  data-src="/projects/task/list"  target="_top" >任务管理</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="layui-icon layui-icon-github"></i><span>集群管理</span></a>
                    <dl class="layui-nav-child">
                        <dd class="main_left"><a  data-src="/servers/cluster/list?pagename=cat1&title=主机管理|集群管理"  target="_top" >集群管理</a></dd>
                        <dd class="main_left"><a  data-src="/servers/cluster/list?pagename=cat1&title=主机管理|集群管理"  target="_top" >部署管理</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="layui-icon layui-icon-github"></i><span>应用镜像管理</span></a>
                    <dl class="layui-nav-child">
                        <dd class="main_left"><a  data-src="/app_images/image_package/list"  target="_top" >镜像包管理</a></dd>
                        <dd class="main_left"><a  data-src="/app_images/soft_package/list"  target="_top" >软件管理</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="layui-icon layui-icon-github"></i><span>仓库管理</span></a>
                    <dl class="layui-nav-child">
                        <dd class="main_left"><a  data-src="/respostory_manage/git_repos/list"  target="_top" >镜像源仓库管理</a></dd>
                        <dd class="main_left"><a  data-src="/respostory_manage/helm_charts_repos/list"  target="_top" >helm-charts管理</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="layui-icon layui-icon-github"></i><span>日志管理</span></a>
                    <dl class="layui-nav-child">
                        <dd class="main_left"><a  data-src="/log_manage/server_log/list"  target="_top" >服务器日志</a></dd>
                        <dd class="main_left"><a  data-src="/log_manage/actor_log/list"  target="_top" >操作日志</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="layui-icon layui-icon-github"></i><span>预警管理</span></a>
                    <dl class="layui-nav-child">
                        <dd class="main_left"><a  data-src="/alert_manage/alert_task/list"  target="_top" >预警任务管理</a></dd>
                        <dd class="main_left"><a  data-src="/alert_manage/alert_msg/list"  target="_top" >预警通知管理</a></dd>
                        <dd class="main_left"><a  data-src="/alert_manage/check_task/list"  target="_top" >自动巡检管理</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="layui-icon layui-icon-github"></i><span>开放api功能</span></a>
                    <dl class="layui-nav-child">
                        <dd class="main_left"><a  data-src="/api_manage/apis/list"  target="_top" >Api接口</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <div class="main_right">
            <!-- 主体内容 -->
            <div id="LAY_app_body">
                <div class="layadmin-tabsbody-item layui-show">
                    <iframe id="aa" scrolling="yes" src="home/console.html" frameborder="0" width="100%"></iframe>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        底部固定区域
    </div>
</div>

<script src="{{ url_for('static', filename='layui.js') }}"></script>
<script>
    //JS
    layui.use(["element", "layer", "util"], function () {
        var element = layui.element;
        var layer = layui.layer;
        var util = layui.util;
        var $ = layui.$;

        //获取src值
        $(".main_left a").on("click",function(){
            var address =$(this).attr("data-src");
            $("iframe").attr("src",address);
        });
		//一下代码是根据窗口高度在设置iframe的高度
        var frame = $("#aa");

        var frameheight = $(window).height();
        console.log(frameheight);
        frame.css("height",frameheight);

        //头部事件
        util.event("lay-header-event", {
            menuLeft: function (othis) {
                // 左侧菜单事件
                layer.msg("展开左侧菜单的操作", {icon: 0});
            },
            menuRight: function () {
                // 右侧菜单事件
                layer.open({
                    type: 1,
                    title: "更多",
                    content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                    area: ["260px", "100%"],
                    offset: "rt", // 右上角
                    anim: "slideLeft", // 从右侧抽屉滑出
                    shadeClose: true,
                    scrollbar: false,
                });
            },
        });
        $('#menu-left-shrick').click(function () {
            const $menuLeftAside = $('.layui-side');
            if ($menuLeftAside.width() >= 200) {
                $menuLeftAside.css('width', '60px');
                setTimeout(function () {
                    $('.layui-side .layui-nav .layui-nav-item span').addClass('layui-anim').removeClass('layui-anim-fadein').addClass('layui-anim-fadeout');
                }, 200);
                $('.layui-body').css('left', '60px');
                $('.layui-footer').css('left', '60px');
            } else {
                $menuLeftAside.css('width', '200px');
                setTimeout(function () {
                    $('.layui-side .layui-nav .layui-nav-item span').addClass('layui-anim').removeClass('layui-anim-fadeout').addClass('layui-anim-fadein');
                }, 200);
                $('.layui-body').css('left', '200px');
                $('.layui-footer').css('left', '200px');
            }
        });
        $('#menu-left-refresh').click(function () {
            $('#menu-left-refresh').removeClass('layui-anim').removeClass('layui-anim-rotate');
            setTimeout(function () {
                $('#menu-left-refresh').addClass('layui-anim').addClass('layui-anim-rotate');
            }, 100);
        });
        $('.layui-tab-title').on('contextmenu', 'li', 1, function (event) {
            event.preventDefault();
            const layId = $(this).attr('lay-id');
            layer.open({
                type: 1,
                title: '关闭标签',
                content: false,
                time: 5000,
                success: function (layero, index) {
                    let timeNum = this.time / 1000, setText = function (start) {
                        layer.title('弹窗<span class="layui-font-red">' + (start ? timeNum : --timeNum) + '</span> 秒后自动关闭', index);
                    };
                    setText(!0);
                    this.timer = setInterval(setText, 1000);
                    if (timeNum <= 0) clearInterval(this.timer);
                },
                end: function () {
                    clearInterval(this.timer);
                },
                btn: ['关闭当前', '关闭其他', '关闭全部'],
                btn1: function (index, layero, that) {
                    element.tabDelete('tab-page', layId);
                    layer.close(index);
                },
                btn2: function (index, layero, that) {
                    $('.layui-tab-title li').each(function (index, elem) {
                        let liLayId = $(this).attr('lay-id');
                        if (liLayId !== layId) {
                            element.tabDelete('tab-page', liLayId);
                        }
                    });
                    layer.close(index);
                },
                btn3: function (index, layero, that) {
                    $('.layui-tab-title li').each(function (index, elem) {
                        let liLayId = $(this).attr('lay-id');
                        element.tabDelete('tab-page', liLayId);
                    });
                    layer.close(index);
                }
            });
        });
        element.on('nav(header-left-nav)', function (elem) {
            console.log(elem);
        });
        element.on('nav(header-right-nav)', function (elem) {
            console.log(elem);
        });
        element.on('nav(side-left-nav)', function (elem) {
            console.log(elem);
        });


        // 自定义固定条
        util.fixbar({
            bars: [
                { // 定义可显示的 bar 列表信息 -- v2.8.0 新增
                    type: 'share',
                    icon: 'layui-icon-share'
                },
                {
                    type: 'help',
                    icon: 'layui-icon-help'
                },
                {
                    type: 'cart',
                    icon: 'layui-icon-cart',
                    style: 'background-color: #FF5722;'
                },
                {
                    type: 'groups',
                    content: '群',
                    style: 'font-size: 21px;'
                }
            ],
            // bar1: true,
            // bar2: true,
            // default: false, // 是否显示默认的 bar 列表 --  v2.8.0 新增
            // bgcolor: '#393D52', // bar 的默认背景色
            // css: {right: 100, bottom: 100},
            // target: '#target-test', // 插入 fixbar 节点的目标元素选择器
            // duration: 300, // top bar 等动画时长（毫秒）
            on: { // 任意事件 --  v2.8.0 新增
                mouseenter: function (type) {
                    layer.tips(type, this, {
                        tips: 4,
                        fixed: true
                    });
                },
                mouseleave: function (type) {
                    layer.closeAll('tips');
                }
            },
            // 点击事件
            click: function (type) {
                console.log(this, type);
                // layer.msg(type);
            }
        });
    });
</script>
</body>
</html>

